/**
 * 〈所属模块〉
 * 〈功能描述〉
 *
 * @author Lcs
 * @date 2017/9/15 13:27
 */

import React, { Component } from "react";
import {
  StyleSheet, Text, View, TouchableOpacity, Image, TextInput, Switch,
} from "react-native";
import { connect } from "react-redux"; // 引入connect函数
import * as pickerAreaAction from "../actions/pickerAreaAction"; // 导入action方法
import * as editAddressAction from "../actions/editAddressAction"; // 导入action方法
import * as addressListAction from "../actions/addressListAction"; // 导入action方法
import {
  Color, ScreenWidth, FontSize, scale,
} from "../common";
import NavigatorUtil from "../utils/NavigatorUtil";
import showAreaPicker from "../utils/AreaPickerUtil";
import BasePage from "../widget/common/BasePage";
import Button from "../widget/common/NCButton";
import EnumConstants from "../common/EnumConstants";

const { EditType } = EnumConstants;
let address;
let type;

class EditAddress extends Component {
  constructor(props) {
    super(props);
    address = NavigatorUtil.getPageParam(props, "address");
    type = NavigatorUtil.getPageParam(props, "type");
    if (address) {
      props.dispatch(editAddressAction.initEdit(address));
    }
    props.dispatch(pickerAreaAction.initEdit(address));
  }

  componentWillReceiveProps(nextProps) {
    const { editAddressReducer } = nextProps;
    if (editAddressReducer != null) {
      const { success } = editAddressReducer;
      if (success === true) {
        const { props } = this;
        props.dispatch(addressListAction.getAddressList());
        NavigatorUtil.goBack();
      }
    }
  }

  componentWillUnmount() {
    const { props } = this;
    props.dispatch(editAddressAction.editAddressUnmount());
  }

  showPicker() {
    const { props } = this;
    const { pickerAreaReducer } = props;
    const { area } = pickerAreaReducer;
    showAreaPicker().then(pickerValue => {
      props.dispatch(pickerAreaAction.getAreaCode(pickerValue));
      props.dispatch(editAddressAction.chooseArea(pickerValue));
    });
  }

  handleClick() {
    const { props } = this;
    const { editAddressReducer, pickerAreaReducer } = props;
    const {
      realName, mobile, area, addressDetail, setDefault,
    } = editAddressReducer;
    const { areaInfo } = pickerAreaReducer;
    if (type === EditType.NEW) {
      props.dispatch(editAddressAction.newAddress(realName, mobile, area, addressDetail, setDefault, areaInfo));
    } else {
      props.dispatch(
        editAddressAction.editAddress(
          realName,
          mobile,
          area,
          addressDetail,
          setDefault,
          areaInfo,
          address.delivery_address_id,
        ),
      );
    }
  }

  render() {
    const { props } = this;
    const { editAddressReducer, pickerAreaReducer } = props;
    const {
      realName, mobile, area, addressDetail, setDefault, loading,
    } = editAddressReducer;

    return (
      <BasePage style={styles.container} showLoading={loading || pickerAreaReducer.loading}>
        <View style={styles.itemRow}>
          <Text style={styles.textKey}>收件人</Text>
          <TextInput
            value={realName}
            onChangeText={text => props.dispatch(editAddressAction.inputName(text))}
            maxLength={10}
            style={styles.input}
            underlineColorAndroid={Color.transparent}
            placeholder="请输入收货人姓名"
            enablesReturnKeyAutomatically={false}
            placeholderTextColor={Color.text_assist}
          />
          <Image source={require("../img/ic_addresslist.png")} style={styles.imgIcon} />
        </View>
        <View style={styles.divider} />
        <View style={styles.itemRow}>
          <Text style={styles.textKey}>手机号</Text>
          <TextInput
            value={mobile}
            onChangeText={text => props.dispatch(editAddressAction.inputMobile(text))}
            maxLength={20}
            keyboardType="numeric"
            style={styles.input}
            underlineColorAndroid={Color.transparent}
            placeholder="请输入收货人手机号"
            enablesReturnKeyAutomatically={false}
            placeholderTextColor={Color.text_assist}
          />
        </View>
        <View style={styles.divider} />
        <View style={styles.itemRow}>
          <Text style={styles.textKey}>省市区</Text>
          <TouchableOpacity activeOpacity={0.8} style={styles.subRowConatiner} onPress={() => this.showPicker()}>
            <View style={styles.subRowConatiner}>
              <TextInput
                value={area}
                editable={false}
                maxLength={30}
                style={styles.input}
                underlineColorAndroid={Color.transparent}
                placeholder="请选择地区"
                enablesReturnKeyAutomatically={false}
                placeholderTextColor={Color.text_assist}
              />
              <Image source={require("../img/ic_location.png")} style={styles.imgIcon} />
            </View>
          </TouchableOpacity>
        </View>
        <View style={styles.divider} />
        <View style={styles.inputAreaContainer}>
          <TextInput
            value={addressDetail}
            onChangeText={text => props.dispatch(editAddressAction.inputAddressDetail(text))}
            maxLength={40}
            style={styles.inputDetail}
            multiline
            underlineColorAndroid={Color.transparent}
            placeholder="详细地址：比如街道，门牌号，小区名字，几号楼，特殊名称等等"
            enablesReturnKeyAutomatically={false}
            placeholderTextColor={Color.text_assist}
          />
        </View>
        <View style={styles.rowSwitch}>
          <Text style={styles.textKey}>设置为默认地址</Text>
          <Switch
            value={setDefault}
            onValueChange={value => props.dispatch(editAddressAction.changeSetDefault(value))}
          />
        </View>
        <Button
          onPress={() => this.handleClick()}
          buttonStyle={styles.btnContainer}
          textStyle={styles.btnText}
          title="保存地址"
        />
      </BasePage>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: Color.white,
    alignItems: "center",
    paddingTop: scale * 16,
  },
  itemRow: {
    height: scale * 48,
    width: ScreenWidth,
    flexDirection: "row",
    alignItems: "center",
    paddingHorizontal: 16 * scale,
  },
  subRowConatiner: {
    flex: 1,
    flexDirection: "row",
    alignItems: "center",
  },
  divider: {
    height: StyleSheet.hairlineWidth,
    width: ScreenWidth - scale * 32,
    backgroundColor: Color.devider,
    marginLeft: scale * 16,
  },
  textKey: {
    fontSize: FontSize.SIZE_14,
    color: Color.text_desc,
  },
  btnContainer: {
    marginTop: scale * 32,
    height: 44 * scale,
    width: ScreenWidth - scale * 64,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: Color.tab_yellow,
    borderWidth: 0,
  },
  btnText: {
    fontSize: FontSize.SIZE_17,
    color: Color.text_title,
  },
  input: {
    flex: 1,
    marginLeft: scale * 30,
    marginRight: scale * 30,
    color: Color.text_title,
    fontSize: FontSize.SIZE_14,
    paddingTop: 0,
    paddingBottom: 0,
  },
  inputAreaContainer: {
    width: ScreenWidth - scale * 32,
    height: scale * 70,
    paddingHorizontal: 16 * scale,
    paddingVertical: 14 * scale,
    backgroundColor: Color.background_native,
  },
  inputDetail: {
    flex: 1,
    color: Color.text_title,
    fontSize: FontSize.SIZE_12,
  },
  imgIcon: {
    width: scale * 24,
    height: scale * 24,
  },
  rowSwitch: {
    height: scale * 44,
    justifyContent: "space-between",
    width: ScreenWidth,
    flexDirection: "row",
    alignItems: "center",
    paddingHorizontal: 16 * scale,
  },
});

const reducers = state => {
  return {
    pickerAreaReducer: state.pickerAreaReducer,
    editAddressReducer: state.editAddressReducer,
  };
};

export default connect(reducers)(EditAddress);
